<!DOCTYPE html>
<style>
    .footer-top {
        overflow: hidden;
        width: 100%;
        height: 335px;
        background-color: #212121
    }
    
    .footer-logo {
        margin: 20px 0
    }
    
    .footer-logo img {
        width: 170px;
        margin: 0 auto
    }
    
    .footer-list {
        margin: 0 auto;
        width: 977px;
        height: 180px
    }
    
    .footer-list ul {
        float: left;
        width: 200px
    }
    
    .footer-list ul:last-child {
        width: 130px
    }
    
    .footer-list ul a {
        color: #000
    }
    
    .footer-list ul h1,
    .footer-list ul li {
        text-align: left;
        font-size: 16px;
        margin-bottom: 5px;
        vertical-align: top;
        color: #fff
    }
    
    .footer-list ul li a {
        color: #fff
    }
    
    .footer-list ul h1 {
        font-weight: bolder;
        font-size: 18px
    }
    
    .footer-list ul:last-child span {
        font-size: 45px
    }
    
    .footer-list ul:first-child h1 span {
        color: brown;
        font-size: 30px;
        display: inline-block;
        margin-left: 10px
    }
    
    .footer-f {
        height: 36px;
        background-color: #010101
    }
    
    .footer-f a {
        display: inline-block;
        line-height: 36px;
        color: #fff
    }
    
    .footer-f a:nth-of-type(1) {
        margin-left: 240px
    }
    
    .footer-f a:nth-of-type(2) {
        margin-left: 200px
    }
    
    .footer-f a:nth-of-type(3) {
        margin-left: 80px
    }
    
    .nav ul {
        position: fixed;
        right: 0;
        bottom: 100px
    }
    
    .nav ul li {
        width: 60px;
        height: 60px;
        background-color: #000;
        text-align: center;
        cursor: pointer;
        margin-bottom: 4px;
        padding-top: 4px
    }
    
    .nav ul li span {
        font-size: 30px;
        color: #fff
    }
    
    .nav ul li a {
        color: #fff;
        font-size: 14px;
        display: inline-block
    }
    
    .nav ul li:last-child {
        padding-top: 14px
    }
</style>
<!-- <link rel="stylesheet" href="../css/footer.min.css"> -->
<div class="footer-top">
    <div class="footer-logo">
        <a href="">
            <img src="img/10038.png" alt="logo">
        </a>
    </div>
    <div class="footer-list">
        <ul>
            <h1>
                在线客服
                <span class="iconfont icon-xiaoxi1"></span>
            </h1>
            <li>在线时间09:00-22:00</li>
        </ul>
        <ul>
            <h1>官方商城</h1>
            <li>
                <a href="">全部商品</a>
            </li>
            <li>
                <a href="">新品</a>
            </li>
            <li>
                <a href="">男装</a>
            </li>
            <li>
                <a href="">女装</a>
            </li>
            <li>
                <a href="">鞋类</a>
            </li>
            <li>
                <a href="">配件</a>
            </li>
        </ul>
        <ul>
            <h1>关于Dickies</h1>
            <li>
                <a href="">品牌故事</a>
            </li>
            <li>
                <a href="">品牌动态</a>
            </li>
        </ul>
        <ul>
            <h1>客户服务</h1>
            <li>
                <a href="">订购流程</a>
            </li>
            <li>
                <a href="">如何注册</a>
            </li>
            <li>
                <a href="">常见问题</a>
            </li>
            <li>
                <a href="">联系我们</a>
            </li>
        </ul>
        <ul>
            <h1>关注我们</h1>
            <li>
                <a href="">
                    <span class="iconfont icon-weibo"></span>
                </a>
                <a href="">
                    <span class="iconfont icon-weixin"></span>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="footer-f">
    <a href="">沪ICP备18048101号 ©2019 Williamson-Dickie Mfg. Co., LLC. Quality Workwear Since 1922</a>
    <a href="">隐私政策</a>
    <a href="">安全政策</a>
</div>
<div class="nav">
    <ul>
        <li>
            <span class="iconfont icon-xiaoxi"></span>
            <a href="">在线客服</a>
        </li>
        <li>
            <span class="iconfont icon-wenti"></span>
            <a href="">常见问题</a>
        </li>
        <li>
            <span class="iconfont icon-xiangshang"></span>
        </li>
    </ul>
</div>